import { DirectiveBinding, createApp } from 'vue';
import { store } from '@/store';
// #region router
import router from './route';
// #endregion

// #region ElementPlus
import ElementPlus, { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// #endregion

// #region ElementPlusIcons
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// #endregion

// #region Date.format
import '@/libs/Date';
// #endregion

import App from './App.vue';
import components from './components';
import { translate } from '@/libs/ShangTranslate/ShangTranslate';
import { privacyMobile } from '@/libs/privacyMobile';
import { ElButton } from 'element-plus';
// const body = {
//   name: 'admin',
//   password: '123456',
// };
// fetch('/api/User/Login', { body: JSON.stringify(body) })
//   .then((res) => res.json())
//   .then((res) => {
//     console.log(res);
//   });
const app = createApp(App);
app.use(router);
app.use(components);
app.use(ElementPlus, { locale: zhCn }); // size: 'small'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.config.globalProperties.$t = translate;
app.config.globalProperties.$privacyMobile = privacyMobile;
// app.directive('debounce', {
//   inserted(el, binding) {
//     el.addEventListener('click', (e) => {
//       el.classList.add('is-disabled');
//       console.log('disabled');

//       el.disabled = true;
//       setTimeout(() => {
//         el.disabled = false;
//         el.classList.remove('is-disabled');
//       }, 20000); //我这里设置的是2000毫秒也就是2秒
//     });
//   },
// });
// app.directive('debounce', {
//   mounted(el: HTMLElement, binding: DirectiveBinding) {
//     let timeout: NodeJS.Timeout | null = null;
//     el.addEventListener('click', () => {
//       let firstClick: Boolean = !timeout;

//       if (firstClick) {
//         // binding.value();
//         el.disabled = true;
//         // console.log('disabled');
//       }
//       if (timeout) {
//         clearTimeout(timeout);
//       }
//       timeout = setTimeout(() => {
//         timeout = null;
//         if (!firstClick) {
//           // binding.value();
//           el.disabled = false;
//           console.log('disabled');
//         }
//       }, 3000);
//     });
//   },
// });
app.directive('debounced', {
  mounted(el: typeof ElButton, binding: DirectiveBinding) {
    let timeout: number | undefined;
    el.addEventListener('click', () => {
      el.disabled = true;
      // console.log('防抖开始');
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        el.disabled = false;
        // console.log('防抖结束 el.disabled = false');
      }, 1000);
    });
  },
});
// app.directive('loadmore', {
//   mounted(el: Element, binding: DirectiveBinding) {
//     const SELECTWRAP_DOM = el.querySelector(
//       '.el-select-dropdown .el-select-dropdown__wrap'
//     );
//     if (SELECTWRAP_DOM != null) {
//       SELECTWRAP_DOM.addEventListener('scroll', function (el) {
//         const condition = this.scrollHeight - this.scrollTop <= el.clientHeight;
//         if (condition) {
//           binding.value();
//         }
//       });
//     }
//   },
// });
app.mount('#app');
